<template>
  <div class="profile-container flex-column">
    <Header />
    <!-- 用户信息区域 -->
    <UserInfo :userInfo="userInfo" />
    <!-- 作品列表区域 -->
    <VideoInfo :postList="postList" :collectList="collectList" :likeList="likeList" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { userApi } from '@/api/user'
import UserInfo from './components/UserInfo.vue'
import VideoInfo from './components/VideoInfo.vue'
import Header from './components/Header.vue'
import { useUserStore } from '@/stores/index'
import useVideoList from './hooks/useVideoList'
const userStore = useUserStore()

const { postList, collectList, likeList, fetchList } = useVideoList()

// 用户信息
const userInfo = ref({
  _id: '',
  username: '星视频',
  x_id: '123456',
  avatar: 'https://example.com/avatar.jpg',
  cover: 'https://example.com/cover.jpg',
  description: '星视频，星光璀璨',
  likeCount: 100,
  followCount: 100,
  fansCount: 100,
})
// 获取用户信息
const getUserInfo = async () => {
  const res = await userApi.getUserInfo()
  console.log(res)

  userInfo.value = res
  userStore.setUserInfo({ id: res._id, username: res.username, avatar: res.avatar })
  await fetchList(userInfo.value._id)
}

onMounted(() => {
  getUserInfo()
})
</script>

<style scoped>
.profile-container {
  flex: 1;
  background-color: var(--container-background-color);
}
</style>
